import { html, css, LitElement } from "lit";

class MyHeader extends LitElement {
  static properties = {
    name: { type: String },
  };
  render() {
    return html`
      <div>header ${this.name}</div>
    `;
  }
}
customElements.define("my-header", MyHeader);

export class SimpleGreeting extends LitElement {
  static styles = css`
    p {
      color: blue;
    }
  `;

  static properties = {
    name: { type: String },
  };

  constructor() {
    super();
    this.name = "Somebody";
  }

  render() {
    return html`
      <my-header name="header2"></my-header>
      <p>Hello, ${this.name}!</p>
    `;
  }
}

customElements.define("lit-root", SimpleGreeting);
